﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>用户管理</title>
		<link rel="stylesheet"
			href="/static/css/table.css" type="text/css"/>
				<!--以下3个js库必须按照顺序引入-->
				<!--vue脚本库-->
				<script type="text/javascript"
						src="/static/js/vue-3.2.4.global.js">
				<!--axios脚本库-->
				</script>
				<script type="text/javascript"
						src="/static/js/axios-0.18.0.min.js">
				</script>
				<!--我们自己封装的axios函数库 -->
				<script type="text/javascript"
						src="/static/js/axios-helper.js">
				</script>

	</head>
	<body id="app">
		<table width="100%">
			<tr>
				<td>
					<font color="black">您正在做的业务是：人力资源--权限管理--用户管理 </font>
				</td>
			</tr>
			<tr>
				<td>
					当前角色总数：{{sum}}例
				</td>
			</tr>
			<tr>
				<td align="right">
					<input type="button" value="添加用户" class="BUTTON_STYLE1" onclick="location.href='user_add.html'">
				</td>
			</tr>
		</table>
		<table width="100%" border="1" cellpadding=5 cellspacing=1
				bordercolorlight=#848284 bordercolordark=#eeeeee
				class="TABLE_STYLE1">
			<tr class="TR_STYLE1">
				<td class="TD_STYLE1">
					用户编号
				</td>
				<td class="TD_STYLE1">
					用户名称
				</td>
				<td class="TD_STYLE1">
					真实姓名
				</td>
				<td class="TD_STYLE1">
					用户密码
				</td>
				<td class="TD_STYLE1">
					用户身份
				</td>
				<td class="TD_STYLE1">
					操作
				</td>
			</tr>
			<tr class="TR_STYLE2" v-for="user in list">
				<td class="TD_STYLE2">
					{{user.uid}}
				</td>
				<td class="TD_STYLE2">
					{{user.uname}}
				</td>
				<td class="TD_STYLE2">
					{{user.utrueName}}
				</td>
				<td class="TD_STYLE2">
					{{user.upassword}}
				</td>
				<td class="TD_STYLE2">
					{{user.role.rname}}
				</td>
				<td class="TD_STYLE2">
					<img src="/static/images/bt_edit.gif" title="编辑" style="cursor:pointer;" @click="f(user.uid)"/>
					<img src="/static/images/bt_del.gif" title="删除" style="cursor:pointer;"
						 @click="del(user.uid)"/>
				</td>
			</tr>
		</table>
		<p style="text-align:center;">
			
				<a href="javascript:void(0)" style="color:black;" @click="goto(1)">首页</a>
				&nbsp;
				<a href="javascript:void(0)" style="color:black;" @click="previous()">上一页</a>
				&nbsp;
				<font color="red">{{page.current}}</font>
				&nbsp;
				<a href="javascript:void(0)" style="color:black;" @click="next()">下一页</a>
				&nbsp;
	     		<a href="javascript:void(0)" style="color:black;" @click="goto(maxPage)">尾页</a>

		</p>
	</body>
	<script type="module">
		Vue.createApp({
			//数据绑定
			data(){
				//可以将此对象理解为 vue中的模型层
				return {
					//用户列表
					list:[],
					sum:null,
					//默认分页查询的值
					page:{
						current:1,
						size:4
					},
					maxPage:null
				}
			},
			//此函数在vue对象创建之后，data、监听、methods...等初始化完毕之后调用此函数
			created(){
				this.loadList();
			},
			//函数绑定
			methods:{
				//加载用户列表
				loadList(){
					//get请求,调用查询用户列表的接口
					requestGet("/users/queryList",this.page).then((data)=>{
						console.info("*** data:",data);
						//将用户列表设置到vue中的模型层
						this.list = data.records;
						//拿当前用户总数
						this.sum=data.total;
						//拿最大页码数
						let maxPage=Math.ceil(data.total/data.size);
						console.info("***最大页码数：",maxPage)
						//将最大页码数赋值到模型层
						this.maxPage=maxPage;
					});
				},
				//跳转指定页码
				goto(num){
					//设置查询条件中的当前页码
					this.page.current=num;
					//查询
					this.loadList();
				},
				previous(){
					let cur=this.page.current;
					cur=(cur-1) < 1 ? 1:(cur-1);
					//将当前页码数赋值到模型层
					this.page.current=cur;
					//重新查询
					this.loadList();
				},
				next(){
					let cur=this.page.current;
					cur=(cur+1) > this.maxPage? this.maxPage:(cur+1);
					//将当前页码数赋值到模型层
					this.page.current=cur;
					//重新查询
					this.loadList();
				},
				del(uid){
					requestDelete("/users/del",{
						uid:uid
					}).then((data)=>{
						if(data.statusCode==1){
							// alert("删除成功");
							// this.loadList();
							window.location.href = "/templates/page/power/success.html";
						}else{
							alert("删除失败");
						}
					})
				},
				f(uid){
					sessionStorage.setItem("id",uid);
					window.location.href = "/templates/page/power/user_edit.html";
				}

			}
		}).mount("#app");
	</script>
</html>
